<template>
  <view class="container w100p common_wrap no-bg">
    <CommonHeader
      :title="$t('收货地址')"
      color="#262728"
      :is-right="false"
      @goback="goback"
    ></CommonHeader>
    <view class="bg-color"></view>

    <view class="scroll-h">
      <view class="forms">
        <view class="form-input">
          <view class="left-name">{{ $t('收货人') }}</view>
          <view class="right-inp">
            <input type="text" :placeholder="$t('请填写收货人姓名')" placeholder-class="shiping-placeholder" v-model="addressInfo.username"/>
          </view>
        </view>

        <view class="form-input">
          <view class="left-name">{{ $t('手机号') }}</view>
          <view class="right-inp">
            <input type="number" :placeholder="$t('请填写收货人手机号')" placeholder-class="shiping-placeholder" v-model="addressInfo.mobile" maxlength="11"/>
          </view>
        </view>

        <view class="form-input" >
          <view class="left-name">{{ $t('所在地区2') }}</view>
          <view style="flex: 1">

            <city :value="addressInfo.mergename" @change="e => {
                addressInfo.mergename = e.column1.value == -1 ? '不限' : (e.column1.label + '-' + e.column2.label + '-' + e.column3.label);
                addressInfo.area_id = `${e.column1.value},${e.column2.value},${e.column3.value}`
              }">
                <view class="right-inp"> 
                  <view :class="['txt',!addressInfo.mergename ? 'shiping-placeholder' : '']">{{ addressInfo.mergename ? addressInfo.mergename : $t('省、市') }}</view>
                  <image
                    src="/static/mt-li/downlad.png"
                  />
                </view>
              </city>
            </view>

            
          
        </view>

        <view class="form-input">
          <view class="left-name">{{ $t('详细地址') }}</view>
          <view class="right-inp">
            <input type="text" :placeholder="$t('小区、门号牌')" placeholder-class="shiping-placeholder" v-model="addressInfo.xx_address"/>
          </view>
        </view>

      </view>
    </view>



    <!-- 上传支付凭证 -->
    <view class="btn-w">
      <view class="btn" @click="onConfirmAdress">{{ $t('确定2') }}</view>
      <view style="height: 24rpx;"></view>
    </view>


    <selectAddress 
       :is_register="1" 
       :is_port="true" 
       v-model="showAddress" 
       @change="onConfirm"
			:select_city_new="select_city_new" 
      :select_city_newd="[]"
    ></selectAddress>
  </view>
</template>



<script>
  import CommonHeader from "../components/common-header.vue";
  import selectAddress from "./selectAddress.vue";


  export default {
    data() {
      return {
        addressInfo: {},
        showAddress: false,
        select_city_new: [],
        optionStr: '',
        optiponArr: [],
        lang: '',
      }
    },
    components: {
      CommonHeader,
      selectAddress
    },
    methods: {
      onPtionArea() {
        this.showAddress = true;
      },
      // 确认
      onConfirm(e) {
        let arrStr = e.map(item => item.label).join(",")
        if (arrStr == '请选择,请选择,请选择') {
          this.addressInfo.mergename = '';
          this.addressInfo.area_id = '';
        } else {
          this.addressInfo.mergename = arrStr;
          this.addressInfo.area_id = e.map(item => item.value).join(",");
        }
        this.optiponArr = e;
      },
      goback() {
				uni.navigateBack({
          delta: 1,
        })
			},
      onConfirmAdress() {
        if (!this.addressInfo.username) {
          uni.showToast({
            title: this.$t('请填写收货人姓名'),
            icon: 'none',
          })
          return;
        }
        if (!this.addressInfo.mobile) {
          uni.showToast({
            title: this.$t('请填写收货人手机号'),
            icon: 'none',
          })
          return;
        }

        if (!this.addressInfo.mergename) {
          uni.showToast({
            title: this.$t('请选择所在地区'),
            icon: 'none',
          })
          return;
        }
        if (!this.addressInfo.xx_address) {
          uni.showToast({
            title: this.$t('请填写详细地址'),
            icon: 'none',
          })
          return;
        }

        let info = {
          username: this.addressInfo.username,
          mobile: this.addressInfo.mobile,
          mergename: this.addressInfo.mergename,
          mergename_ru: this.addressInfo.mergename,
          area_id: this.addressInfo.area_id,
          xx_address: this.addressInfo.xx_address,
        }

        // let pages = getCurrentPages()
        // let prevPage = pages[pages.length - 2]
        // prevPage.onUpdateAddress(info)
        uni.setStorageSync('onUpdateAddress', JSON.stringify(info));
        uni.navigateBack();
      }
    },
    onLoad({addressInfo}) {
      // this.addressInfo = JSON.parse(addressInfo);
      this.addressInfo = uni.getStorageSync('addressInfo')

      this.addressInfo.username = this.addressInfo[this.plang('username')]
			this.lang = uni.getStorageSync("lang");

      if (this.lang == 'ru') {
        this.addressInfo.mergename = this.addressInfo.mergename_ru;
      } 
    },
    onShow() {

    }
  }
</script>





<style lang="scss" scoped>
  .container {
    .bg-color {
      width: 100%;
      height: 227rpx;
      background: linear-gradient(to bottom, RGBA(234, 246, 255, 1), RGBA(255, 255, 255, 1));
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      position: absolute;
      top: 0;
      left: 0;
    }
    .scroll-h {
      position: relative;
      z-index: 1;
      height: 100%;
      width: 100%;
      overflow: hidden;
      .forms {
        width: 702rpx;
        height: 336rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(0,0,0,0.06);
        border-radius: 12rpx 12rpx 12rpx 12rpx;
        margin: 0 auto;
        padding: 0 24rpx;
        margin-top: 24rpx;
        .form-input {
          display: flex;
          align-items: center;
          height: 84rpx;
          border-bottom: 1px solid rgba(144, 147, 153, 0.20);
          &:last-child {
            border-bottom: none;
          }
          .left-name {
            font-weight: 500;
            font-size: 26rpx;
            color: #262728;
            margin-right: 10rpx;
          }
          .right-inp {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            input {
              flex: 1;
              font-weight: 400;
              font-size: 24rpx;
              color: #333;
              text-align: right;

            }
            .txt {
              text-align: right;
              font-weight: 400;
              font-size: 24rpx;
              color: #333;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              width: 200rpx;
              flex: 1;
              margin-left: 10rpx;
            }
            image {
              width: 40rpx;
              height: 20rpx;
            }
          }
        }
      }
    }
  }


  .shiping-placeholder {
    font-weight: 400;
    font-size: 24rpx;
    color: #909399;
  }


  // 上传凭证
  .btn-w {
    padding: 24rpx;
    padding-bottom: env(safe-area-inset-bottom);
    margin-top: 40rpx;
    width: 100%;
    .btn {
      height: 100rpx;
      background: linear-gradient(180deg, #4badfd 0%, #2b61eb 100%);
      border-radius: 18rpx 18rpx 18rpx 18rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 400;
      font-size: 28rpx;
      color: #ffffff;
      margin-bottom: 24rpx;
    }
  }
</style>